import type {ActionType, ProColumns, ProDescriptionsItemProps} from '@ant-design/pro-components';
import {
    PageContainer,
    ProTable,
} from '@ant-design/pro-components';
import React, {useRef, useState} from 'react';
import type {NetworkListItem} from './data';
import {networkList} from './service';
import {dataCenterSelectList} from "@/pages/power/data-center-list/service";
import {NetworkConnTypeEnum} from "@/pages/data.enum";

const CustomNetworkList: React.FC = () => {
    const actionRef = useRef<ActionType>();

    /** 国际化配置 */
    const columns: ProColumns<NetworkListItem>[] = [
        {
            title: '所属资源池',
            dataIndex: "dataCenterId",
            valueType: 'select',
            search: true,
            hidden: true,
            request: async () => {
                const result = await dataCenterSelectList({});
                return (
                    result.data?.map((item) => ({
                        label: item.name,
                        value: item.dataCenterId,
                    })) || []
                );
            },
        },
        {
            title: '所属资源池',
            dataIndex: "dataCenterName",
            valueType: 'text',
            search: false,
            ellipsis: true, // 关闭自动换行
        },
        {
            title: '连接类型',
            dataIndex: 'connType',
            search: true,
            valueType: 'select',
            valueEnum: NetworkConnTypeEnum,
            width: 80,
        },
        {
            title: '互联网IP',
            dataIndex: 'publicIp',
            search: true,
            width: 80,
            ellipsis: true, // 关闭自动换行
            render: (value, record, index) => {
                let result = [];
                for (let i = 0; i < record.publicIpList?.length; i++) {
                    if (record.publicIpList[i].bandwidth === 0) {
                        result.push(
                            <div key={i}>
                                <b>{record.publicIpList[i].publicIp}</b>
                                {i < record.publicIpList.length - 1 && <br/>}
                            </div>
                        );
                    } else {
                        result.push(
                            <div key={i}>
                                <b>{record.publicIpList[i].publicIp}</b>
                                &nbsp;&nbsp;&nbsp;带宽:&nbsp;{record.publicIpList[i].bandwidth}M
                                {i < record.publicIpList.length - 1 && <br/>}
                            </div>
                        );
                    }
                }
                return <div>{result}</div>;
            },
        },
        {
            title: '共享带宽',
            dataIndex: 'topology',
            search: false,
            ellipsis: true, // 关闭自动换行
            render: (value, record, index) => {
                if (record.bandwidth > 0) {
                    return <span>{record.bandwidth}M</span>
                } else {
                    return '-'
                }
            }
        },
        {
            title: '拓扑信息',
            dataIndex: 'topology',
            search: false,
            width:100,
        },
        {
            title: '付费方式',
            dataIndex: 'billingCycle',
            valueType: 'text',
            search: false,
            ellipsis: true, // 关闭自动换行
            render: (value, record, index) => {
                if (record.billingCycle == 'hour') {
                    return <span>￥{record.unitPrice}/小时</span>;
                } else if (record.billingCycle == 'day') {
                    return <span>￥{record.unitPrice}/天</span>;
                } else if (record.billingCycle == 'month') {
                    return <span>￥{record.unitPrice}/月</span>;
                }
                return record.billingCycle
            },
        },
        {
            title: '开通时间',
            dataIndex: 'createdAt',
            valueType: 'text',
            ellipsis: true, // 关闭自动换行
            search: false,
        },
    ];

    return (
        <PageContainer>
            <ProTable<NetworkListItem, API.ListPagination>
                headerTitle="网络列表"
                actionRef={actionRef}
                rowKey="orderId"
                search={{
                    labelWidth: 90,
                }}
                toolBarRender={() => [
                ]}
                scroll={{x: true}}
                request={networkList}
                columns={columns}
                rowSelection={false}
                options={{
                    density: true,
                    fullScreen: true,
                    reload:true,
                    setting: false
                }}
            />
        </PageContainer>
    );
};

export default CustomNetworkList;
